<template>
  <section class="page">
     <div class="btn">
       <btn @click="showDialog" type="primary">标准样式</btn>
     </div>
     <div class="btn">
       <btn @click="showDialog2" type="primary">单个按钮</btn>
     </div>
     <div class="btn">
       <btn @click="showDialog3" type="primary">没有按钮</btn>
     </div>
     <dialog
        v-if="show"
        :show.sync = "show"
        class-name="standard-dislog"
        :buttons = "buttons">
        <div slot="title">自定义标题</div>
        <div slot="content">
          <div>这里是自定义内容，可以自定义内容的样式</div>
          <div class="title">这是个标题</div>
          <div class="primary">这是重要文字</div>
        </div>
     </dialog>
     <dialog
        v-if="show"
        :show.sync = "show"
        className = "standard-dialog"
        :buttons = "buttons2">
        <div slot="title">自定义标题</div>
        <div slot="content">这里是重要文字</div>
     </dialog>
     <dialog
        v-if="show3"
        :show.sync="show3"
        :buttons="buttons3">
        <div slot="title">自定义标题</div>
        <div slot="content">没有按钮，可做提示信息的情况</div>
     </dialog>
  </section>
</template>
<template>
  <div class="ui" transition="dialog-in">
    <div class="{{className}}">
      <div class="ui-dialog-hd"><slot name="title"></slot></div>
      <div class="ui-dialog-hd" :style="'max-height': maxHeight + 'px'}">
        <slot name="content"></slot>
      </div>
      <div v-if="buttons.length > 0" class="ui-dialog-ft">
        <a href="javascript:;" v-for="btn in buttons" @click="close(btn)"></a>
      </div>
    </div>
  </div>
  <mask :show.sync="show"></mask>
</template>


<template>
  <input type="checkbox" :disabled="disabled" v-model="value" class="ui-switch" name="">
</template>
<script type="text/javascript">
  export default{
    props:{
      disabled: {
        default: false
      },
      value: {
        default: false,
        twoWay: true
      }
    },
    methods: {

    }
  }
</script>


<template>
  <section class="page">
    <div class="call">
      <div class="cell-hd">
        {{value ? '开启' : '关闭'}}
      </div>
      <div class="cell-ft">
        <switch-input :value.sync="value2"></switch-input>
      </div>
    </div>
    <div class="cell">
      <div class="cell-hd">禁止</div>
      <div class="cell-ft">
        <switch-input :value.sync="value3" :disabled="disabled"></switch-input>
      </div>
    </div>
  </section>
</template>
<script type="text/javascript">
  import switchInput from 'components/ui/switch.vue'
  export default{
    data(){
      return {
        value: false,
        value2: true,
        value3: false,
        value: true
      }
    },
    components: {
      switchInput
    }
  }
</script>


<script type="text/javascript">
  import btn from "components/ui/btn.vue"
  import dialog from "components/ui/dialog.vue"
  export default{
    data(){
      return {
        show: false,
        show2: false,
        show3: false,
        buttons: [{
          label: '取消',
          type: '',
          onClick(){}
        },
        {
          label: '我知道了',
          type: 'primary',
          onClick(){}
        },
        {
          label: '确认',
          type: 'primary',
          onClick(){}
        }
        ]
      }
    },
    methods: {
      showDialog(){
        this.show = true
      },
      showDialog2(){
        this.show2 = true
      },
      showDialog3(){
        this.show3 = true
      }
    }
  }
</script>


<!-- radio -->
<template>
  <section transition="dialog-in" class="radio-modal">
    <div @click="check($key)" v-for="item in res" class="radio-item" :class="{active: checked == $key}">
      <div class="item-hd">{{item}}</div>
      <div class="item-ft">
        <i class="iconfont">&xe605</i>
      </div>
    </div>
  </section>
  <mask show.sync="show"></mask>
</template>
<script type="text/javascript">
  import mask from 'components/ui/mask.vue'
  export default{
    props: {
      res:{
        default(){
          return {
            value: '默认',
            value2: '默认2'
          }
        }
      },
      checked: {
        default: '',
        twoWay: true
      },
      show: {
        default: false,
        twoWay: true
      }
    },
    components: {
      mask
    },
    methods: {
      check(value){
        this.checked = value;
        this.show = false;
      }
    }
  }
</script>



<template>
  <section class="page">
    <div @click="showRadio" class="cell">
      <div class="cell-hd">点击选择</div>
      <div class="bd">{{checked}}</div>
    </div>
    <radio-modal
      :res = 'res'
      :checked.sync = 'checked'
      :show.sync = 'show'
      v-if = 'show'>

    </radio-modal>
  </section>
</template>
<script type="text/javascript">
  import radioModal from 'components/radio_modal.vue'
  export default {
    data(){
      return {
        checked: '3',
        show: false,
        res: {
          3: 1,
          2: 2
        }
      }
    },
    components: {
      radioModal
    },
    methods: {
      showRadio(){
        this.show = true
      }
    }
  }
</script>


<template>
  <div class="action" transition="slide-in-up">
    <div v-for="item in actions" @click="handle(item)" class="cell-item" :class="{primary: item.primary}">
      {{item.text}}
    </div>
    <div class="cell-item cell-cancel">
      取消
    </div>
  </div>
  <mask :show.sync="show"></mask>
  <div class="action" transition="slide-in-up">
    <div v-for="item in actions" @click="handle(item)" class="cell-item" :class="{primary: item.primart}">
      {{item.text}}
    </div>
    <div class="cell-item cell-cancel">
      取消
    </div>
  </div>
</template>
<script type="text/javascript">
  import mask from 'components/ui/mask.vue'
  export default{
    props: {
      show: {
        default: false,
        twoWay: true
      },
      actions: {
        default(){
          return [{
            text: '默认',
            onClick(){}
          }]
        }
      },
      actions: {
        default(){
          return[{
            text: '默认',
            onClick(){}
          }]
        }
      }
    }
  }
</script>


<template>
  <section class="page">
    <btn @click="showActionSheet" type="primary">actionsheet</btn>
    <actionsheet v-if="show" :show.sync="show" :actions="actions"></actionsheet>

  </section>
</template>


<script type="text/javascript">
  import btn from 'components/ui/btn.vue'
  import actionsheet from 'components/ui/actionsheet.vue'
</script>


<script type="text/javascript">
  import mask form 'components/ui/mask.vue'
  export default{
    props: {
      show: {
        type: Boolen,
        twoWay: true,
        default: false
      },
      className: {
        type: String,
        default: ''
      },
      buttons: {
        type: Array,
        default: function(){
          return [{
            type: 'primary',
            label: '确认',
            onClick(){}
          }]
        }
      },
      maxHeight: {
        default: 320
      }
    },
    methods: {
      close(btn){
        btn.onClick && btn.onClick.call(this);
        this.show = false
      }
    },
    components: {
      mask
    }
  }
</script>


<script type="text/javascript">
export default {

}
</script>

<style type="text/css">

</style>













